<template>
  <div>
    <div class="list-area">
      <div class="setting-area glo-content-area">
        <div class="btns glo-btn-group">
          <Button
            type="primary"
            @click="showCreate"
          >{{ $t("areaIndex.areaAddBtn") }}</Button>
        </div>
        <div class="title">{{ $t("areaIndex.areaAddList") }}</div>
      </div>

      <!-- <div class="glo-selection">
        <Alert show-icon>
          已选择 {{ selection.length }} 项
          <a class="glo-selection-clean" @click="handleSelectionAllStatus(false)">清空</a>
        </Alert>
      </div> -->

      <div class="glo-search-area">
        <div class="widget-item glo-clear-after">
          <div class="widget-label">{{ $t("areaIndex.areaManName") }}：</div>
          <Input
            v-model="areaNameS"
            :placeholder="$t('areaIndex.areaManNameS')"
            search
            :enter-button="$t('devicesIndex.devNumberBtn')"
            @on-search="$_page_update"
          />
        </div>
      </div>


      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
        @on-selection-change="handleSelection"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="$_page_pageChange"
        @on-page-size-change="$_page_pageSizeChange"
      />
    </div>

    <AreaEdit
      v-if="ifCreate"
      @close="closeCreate"
    />
    <AreaEdit
      v-if="ifUpdate"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
    />
  </div>
</template>

<script>
import {
  getList,
  del,
} from '@/api/area.js'
import pageMixin from '@/utils/mixins/pageMixin.js'

import AreaEdit from './components/AreaEdit'
import ListSettings from './components/ListSettings'

export default {
  mixins: [
    pageMixin,
  ],
  components: {
    AreaEdit,
  },

  data () {
    return {
      selection: [],
      list: [],
      columns: [
        // { type: 'selection' },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('areaIndex.areaAddBtnName'),
          key: 'areaName',
        },
        
        {
          title: this.$t('areaIndex.areaAddBtnMan'),
          key: 'midCount',
        },
        {
          title: this.$t('staffIndex.staffphotosName'),
          key: 'usernames',
          // render (h, { row }) {
          render: (h, { row }) => {
            let label = '-'
            let labelBtn = ''
            var that = this
            if (row.usernames) {
              // const newArr = row.usernames.split(',');
              // // console.log(newArr)
              // label = row.usernames
              // if(newArr.length == 4){
              //   // row.usernames = row.usernames + '...'
              //   // console.log(123456)
              //   label = row.usernames+'...'

              // }

              let newArr = row.usernames
              label = row.usernames.split(',')
              // console.log(newArr.length)
              label = row.usernames.split(',')
              if (newArr.length > 10) {
                var aLenth = label.length
                newArr = newArr.slice(0, 10)
                label = `${newArr}...${this.$t('Attendance.AttendanceWait')}${row.midCount}${this.$t('Attendance.AttendancePersonage')}`
              }else{
                label = newArr
              }
            }
            if(label == '-'){
              labelBtn = ''
            }else{
              labelBtn = this.$t('areaIndex.areaAddExamine')
            }
            // return h('div', label)
            return h('div',[
           h(
              'span',
                {     
                      style: { },
                   //就是这里加的属性
                  // domProps: {
                  //    title: label
                  //  }
              },
               label
              ),h(
              'span',
                {     
                      style: { color : '#2d8cf0'},
                   props: { row },
                    on: {
                      click:(e) => { 
                        console.log(row)
                        console.log(123456)
              
                         this.handleSettingsClick('edit', row)
                        }
                      // itemClick: ('edit') => this.handleSettingsClick('edit', row),
                    },
              },
               ' '+labelBtn),
              ],)
          },
        },
        {
          title: this.$t('areaIndex.areaSearchResults'),
          key: 'searchResults',
          
          render (h, { row }) {
            let label = '-'
            if (row.searchResults) {
              label = row.searchResults
            }
            return h('div', label)
            // return h('div', [
            //   h('span', {
            //     style: {display: 'inline-block', 
            //             width: '100%',
            //             overflow: 'hidden',
            //             textOverflow: 'ellipsis', 
            //             whiteSpace: 'nowrap'},
            //   }, label)
            // ])


          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(ListSettings, {
              props: { row },
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ],

      ifCreate: false,
      ifUpdate: false,
      editItem: null,
      areaNameS: '',
    }
  },

  mounted () {
    this.$_page_update()
  },

  methods: {
    showCreate () {
      this.ifCreate = true
    },
    closeCreate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifCreate = false
    },

    showUpdate (item) {
      this.ifUpdate = true
      this.editItem = item
    },
    closeUpdate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifUpdate = false
    },

    handleSelection (selection = []) {
      this.selection = selection
    },
    handleSelectionAllStatus (status) {
      this.$refs.table.selectAll(status)
    },

    handleSettingsClick (name, row) {
      console.log('我进来拉')
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
        case 'del':
          this.handleDel(row)
          break
      }
    },

    async getData (query) {
      var that = this
      const { success, data } = await getList({
        page: query.page,
        limit: query.pageSize,
        usernames: that.areaNameS,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        if (data.data.length) {
          data.data.forEach((item, index) => {
            item.searchResults = that.areaNameS
          })
        }
        list = data.data
        page = data.pageNum || 1
        total = data.count
      }
      this.list = list
      this.page = page
      this.pageSize = query.pageSize
      this.total = total
    },
    async handleDel (item) {
      this.$Modal.confirm({
        title: this.$t('areaIndex.areaAddDel'),
        // content: this.$t('devicesIndex.devStrDelEquipmentIsNew') + item.areaName + this.$t('areaIndex.areaAddDelIs'),
        content: this.$t('areaIndex.areaAddDelIs'),
        onOk: async () => {
          const { success } = await del({ id: item.id })
          if (success) {
            this.$Message.success(this.$t('areaIndex.areaAddDelSucc'))
            this.$_page_update()
          } else {
            this.$Message.error(this.$t('areaIndex.areaAddDelErr'))
          }
        },
      })
    },
  },
  computed: {
    btnShow () {
      return this.$store.state.btnShow
    },
  },
  watch: {
    btnShow () {
      this.columns = [
        // { type: 'selection' },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('areaIndex.areaAddBtnName'),
          key: 'areaName',
        },
        
        {
          title: this.$t('areaIndex.areaAddBtnMan'),
          key: 'midCount',
        },
        {
          title: this.$t('staffIndex.staffphotosName'),
          key: 'usernames',
          // render (h, { row }) {
          render: (h, { row }) => {
            let label = '-'
            let labelBtn = ''
            var that = this
            if (row.usernames) {
              // const newArr = row.usernames.split(',');
              // // console.log(newArr)
              // label = row.usernames
              // if(newArr.length == 4){
              //   // row.usernames = row.usernames + '...'
              //   // console.log(123456)
              //   label = row.usernames+'...'

              // }

              let newArr = row.usernames
              label = row.usernames.split(',')
              // console.log(newArr.length)
              label = row.usernames.split(',')
              if (newArr.length > 10) {
                var aLenth = label.length
                newArr = newArr.slice(0, 10)
                label = `${newArr}...${this.$t('Attendance.AttendanceWait')}${row.midCount}${this.$t('Attendance.AttendancePersonage')}`
              }else{
                label = newArr
              }
            }
            if(label == '-'){
              labelBtn = ''
            }else{
              labelBtn = this.$t('areaIndex.areaAddExamine')
            }
            // return h('div', label)
            return h('div',[
           h(
              'span',
                {     
                      style: { },
                   //就是这里加的属性
                  // domProps: {
                  //    title: label
                  //  }
              },
               label
              ),h(
              'span',
                {     
                      style: { color : '#2d8cf0'},
                   props: { row },
                    on: {
                      click:(e) => { 
                        console.log(row)
                        console.log(123456)
              
                         this.handleSettingsClick('edit', row)
                        }
                      // itemClick: ('edit') => this.handleSettingsClick('edit', row),
                    },
              },
               ' '+labelBtn),
              ],)
          },
        },
        {
          title: this.$t('areaIndex.areaSearchResults'),
          key: 'searchResults',
          
          render (h, { row }) {
            let label = '-'
            if (row.searchResults) {
              label = row.searchResults
            }
            return h('div', label)
            // return h('div', [
            //   h('span', {
            //     style: {display: 'inline-block', 
            //             width: '100%',
            //             overflow: 'hidden',
            //             textOverflow: 'ellipsis', 
            //             whiteSpace: 'nowrap'},
            //   }, label)
            // ])


          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(ListSettings, {
              props: { row },
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ]
      return this.$store.state.btnShow
    }
  },
}
</script>

<style lang="less" scoped>
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
